<template>
  <div class="order-item">
    <xl-content class="nbb">
    <div class="content-block bb space-between">
      <span>{{data.time|dateFormat}}</span>
      <span class="">{{data.order_type==1?'待付款':'已付款'}}</span>
    </div>
    <router-link 
    :to="{
      name:'order-info',
      params:{
        id:data.id
      }
      }"
    >
    <order-breviary :data="itemData"></order-breviary>
    </router-link>
    </xl-content>
    <xl-content class="bt footer">
    <div class="content-block space-between">
      <span>实付款:
         <span class="ora">
            ￥{{data.total_prices|toFixed2}}
          </span>
      </span>
      <div class="footer-button">
      <template v-if="data.order_type == 1">
        <btn-cancel :id="itemData.id" @f5="$emit('f5')"></btn-cancel>
        <btn-pay :id="itemData.id"></btn-pay>
      </template>
      <template v-else>
        <btn-payback :id="itemData.id"></btn-payback>
        <btn-logistics :id="itemData.id"></btn-logistics>
      </template>
      </div>
    </div>
    </xl-content>
  </div>
</template>

<script>
import orderBreviary from '@c/orderBreviary'
import xlContent from '@c/content'
// import xlBtn from '@c/xlBtn'
import btnPay from './btn-pay'
import btnCancel from './btn-cancel-order'
import btnPayback from './btn-pay-back'
import btnLogistics from './btn-logistics'
export default {
  name: 'orderItem',
  components:{
    orderBreviary,
    xlContent,
    // xlBtn,
    btnPay,
    btnCancel,
    btnPayback,
    btnLogistics 
  },
  props:['data'],
  data () {
    return {
      itemData:{
        pic:this.data.pic,
        title:this.data.title,
        num:this.data.num,
        procount:this.data.procount,
        unit:this.data.unit,
        trade_no:this.data.trade_no,
        total_prices:this.data.total_prices,
        id:this.data.id
      }

    }
  },
  computed:{
    orderState(){
      // let 
    }
  },
  methods:{

  }
}
</script>

<style lang='scss' scoped>
@import "../../sass/mixin.scss";
.order-item{
  margin-bottom: 20px;
}
.footer-button{
  @include flex($ai:center);
  .ora {
        color: #fb4700;
        border: 2px solid #fb4700;
        border-radius: 8px;
      }
  button:first-child{
    // margin-right:20px;
  }
}
.weui-btn + .weui-btn {
     margin-top: 0; 
}
.footer{
  // height: 90px;
  margin-top: -20px;
  .content-block{
    padding:5px 3%;;
  }
  span{
    line-height: 90px;
  }
}
</style>